<template>
	<view class="f-poetry-page">
    <view class="header">
      <u-row class="userinfo" gutter="16">
        <u-col span="2">
          <u-avatar size="50"  text="花" randomBgColor></u-avatar>
        </u-col>
        <u-col span="4">
          <u-cell-group :border="false">
            <u--text :text="nickName" :size="style.fontSize" align="left" color="#ffffff"></u--text>
            <u--text :text="phone" :size="style.fontSize" align="left" color="#ffffff"></u--text>
          </u-cell-group>
        </u-col>
        <u-col span="3">
          <view class="info">
            <view><u--text text="会员等级" size="16"  class="username" align="center"  color="#ffffff"></u--text></view>
            <view><u--text text="普通会员" size="12" class="usercode" align="center" color="#ece4e4e5"></u--text></view>
          </view>
        </u-col>
      </u-row>
    </view>
    <u-gap height="10"/>
		<view class="body-list">
      <u-cell-group>
        <u-cell icon="kefu-ermai" :iconStyle="{ color: '#ff8a00' }" title="收藏" :border="false" @click="navTo('/pages/user/service')"></u-cell>
      </u-cell-group>
		</view>
    <u-divider text="更多服务"></u-divider>
    <view class="foot">
      <u-row justify="space-between" gutter="10">
        <u-col span="6">
          <view class="foot-content">
            <u--text  text="流调通" align="left"></u--text>
            <u--text  text="记录用户流动" align="left" type="info" size="12"></u--text>
            <u-gap height="5"></u-gap>
            <u-grid :border="false" col="2">
              <u-grid-item name="1">
                <u-avatar :src="src" shape="square" size="80"></u-avatar>
                <u-badge type="success" max="99" value="最新" :absolute="true" :offset="[-2, 50]"></u-badge>
              </u-grid-item>
              <u-grid-item name="2">
                <u-avatar :src="src" shape="square" size="80"></u-avatar>
                <u-badge type="warning" max="99" value="热门" :absolute="true" :offset="[-2, 50]"></u-badge>
              </u-grid-item>
            </u-grid>
          </view>
        </u-col>
        <u-col span="6" >
          <view class="foot-content">
            <u--text text="古诗词" align="left"></u--text>
            <u--text  text="中国古诗词鉴赏" align="left" type="info" size="12"></u--text>
            <u-gap height="5"></u-gap>
            <u-row justify="space-between" gutter="10">
              <u-col span="6"><view class="demo-layout bg-purple"><u--text text="李白" align="center" type="info"></u--text></view></u-col>
              <u-col span="6"><view class="demo-layout bg-purple"><u--text text="李白" align="center" type="info"></u--text></view></u-col>
            </u-row>
            <u-row justify="space-between" gutter="10">
              <u-col span="6"><view class="demo-layout bg-purple"><u--text text="李白" align="center" type="info"></u--text></view></u-col>
              <u-col span="6"><view class="demo-layout bg-purple"><u--text text="李白" align="center" type="info"></u--text></view></u-col>
            </u-row>
             <u-row justify="space-between" gutter="10">
              <u-col span="6"><view class="demo-layout bg-purple"><u--text text="李白" align="center" type="info"></u--text></view></u-col>
              <u-col span="6"><view class="demo-layout bg-purple"><u--text text="李白" align="center" type="info"></u--text></view></u-col>
            </u-row>
          </view>
        </u-col>
      </u-row>
    </view>
    <u-gap height="20"></u-gap>
	</view>
</template>

<script>
/**
 * Copyright (c) 2020-Now http://www.future.com All rights reserved.
 */
  import { mapState } from 'vuex'
  export default {
    data() {
      return {
          style: {  fontSize: 16,  },
          src: 'https://cdn.uviewui.com/uview/album/6.jpg'
      };
    },
    computed: mapState({
      nickName: state=>state.user.info.nickName,
      phone: state=>state.user.info.phoneEncry
    }),
    created() {

    },
    methods: {
      navTo(url) {uni.$u.route(url)}
    }
  }
</script>

<style lang="scss">
  @import 'poetry.scss';
  /* 个人中心开始 */
  .header {
    background: $u-primary;
    border-radius: 10px;
    height: 130px;
    // 上 右 下 左
    padding: 20px 15px 0 15px;
    .userinfo {
      display: flex;
      .info {
        display: flex;
        flex-flow: wrap;
        color: #fff;
        .username {
          width: 100%;
        }
        .usercode {
          height: 36rpx;
          margin-top: 10rpx;
          background-color: rgba(0, 0, 0, 0.1);
          border-radius: 20rpx;
        }
      }
    }
    .userinfo-topbox{
      padding: 20rpx 30rpx;
      color: #ffffff;
    }

  }
  .body-app{
    .u-cell{
      background: $u-f-main-color;
      border-radius: 10px;
      padding: 10px 8px;
    }
  }

  .body-list{
    background: $u-f-main-color;
    .u-cell{
      border-radius: 10px;
      padding: 10px 8px;
    }
  }
  .foot{
    .foot-content{
      border-radius: 10px;
      background: $u-f-main-color;
      padding: 10px 8px;
      height: 130px;
      .u-row{
        padding: 3px;
      }
      .demo-layout {
        height: 25px;
        border-radius: 4px;
      }
      .bg-purple {
        background: #e5e9f2;
      }
    }
  }

/* 个人中心结束 */
</style>
